<template>
	<view class="content">
		<block v-if="pin&& pin.userList">
			<pfuni :pinId="pin.id" :userInner="pin.userList" @getData="getDataLotteryDraw" :deg="32.8" @getPrize="getPrize"
			 :result="result"></pfuni>
		</block>
		<!-- 规则 -->
		<view class="guize" v-if="!haswinner">
			<view class="title">
				规则说明
			</view>
			<view class="g_item">
				11名会员参与拼团，我们将随机产生一位幸运者获得奖品。其余参与者也将获得一定数量的消费积分。
			</view>

		</view>
		<view class="guize" v-else>
			<view class="title">
				拼团结果
			</view>
			<view class="g_item lotterResult" v-if="result!=-1">
				恭喜{{pin.userList[result]}}赢得本次拼团
			</view>

		</view>
	</view>
</template>

<script>
	import pfuni from "@/components/lotteryDraw/LotteryDraw.vue"
	export default {
		components: {
			pfuni
		},
		data() {
			return {
				result: -1,
				haswinner: false,
				inviteUserId: null,
				pinId: null,
				pin: null,
				socke: null
			};
		},
		onShareAppMessage(e) {
			console.log(e)
			return this.$share()
		},
		onLoad(options) {
			console.log('load')
			if (this.socke) {
				clearInterval(this.socke)
			}

			this.pinId = options.pinId
			console.log(this.pinId)
			this.loadPin()
			// this.socke = setInterval(() => {
			// 	this.loadPin()
			// }, 1000 * 10)
		},

		onShow() {
			// console.log('show')
			// this.pinId = uni.getStorageSync('currentPin')
			this.socke = setInterval(() => {
				this.loadPin()
			}, 1000 * 10)
		},

		onUnload() {
			console.log('unload')
			clearInterval(this.socke)
			this.pin = null
			// uni.removeStorageSync('currentPin')
		},
		onHide() {
			console.log('hide')
			this.pin = null
			// clearInterval(this.socke)
		},
		methods: {
			loadPin() {
				let that = this
				let param = {
					id: that.pinId
				}
				console.log(that.pinId)
				that.$Request.request('/api/pintuan/detail', 'GET', param).then(res => {
					// console.log(res)
					if (res.status == 1) {
						that.pin = res.data
						that.result = res.data.userList.findIndex(item => {
							return item.isWinner
						})
						if (that.pin.userList.length == 11) {
							clearInterval(that.socke)
						}
					}

				}).catch(err => {
					console.log(err)
				})

			},
			getDataLotteryDraw() {
				console.log('get data')
			},
			getPrize(e) {
				console.log(e)
				this.haswinner = true
				console.log('getPrize')
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		min-height: 100%;
		height: auto;
		background-image: url();
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding-top: 50upx;
		padding-bottom: 20upx;
	}

	.guize {
		width: 600upx;
		height: auto;
		display: flex;
		flex-direction: column;
		position: relative;
		z-index: 3;
		background-image: linear-gradient(-180deg, #F48549 0%, #F2642E 100%);
		border: 18upx solid #E4431A;
		border-radius: 16px;
		margin: 0 auto;
		padding: 48upx;
		box-sizing: border-box;
		color: #fff;
	}

	.guize .title {
		text-align: center;
		margin-bottom: 28upx;
	}

	.lotterResult {
		text-align: center;
	}

	.guize .g_item {
		font-family: PingFang-SC-Medium;
		font-size: 24upx;
		color: #FFFFFF;
		letter-spacing: 0.5px;
		text-align: justify;
		line-height: 20px;
	}

	.myrewards .title {
		font-family: PingFang-SC-Bold;
		font-size: 16px;
		color: #E4431A;
		letter-spacing: 0.57px;
		display: flex;
		padding-top: 36upx;
		justify-content: center;
	}
</style>
